<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
	</head>

	<body style="background: #FFFFFF;">
		<div class="mui-content" style="background: #FFFFFF;">
			<form id="form1" method="get">
				<div id="mui-search" class="mui-input-row mui-search">
					<input id="search_word" type="text"  placeholder="搜索你喜欢的">
				</div>
			</form>
			<div id="slider" class="mui-slider mui-fullscreen" style="position: relative;">
							<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
								<div class="mui-scroll">
									<a data-tid="0" class="mui-control-item mui-active" href="#item1mobile">
										推荐
									</a>
									<a data-tid="4" class="mui-control-item" href="#item2mobile">
										动画
									</a>
									<a data-tid="3" class="mui-control-item" href="#item3mobile">
										综艺
									</a>
									<a data-tid="1" class="mui-control-item" href="#item4mobile">
										电影
									</a>
									<a data-tid="2" class="mui-control-item" href="#item4mobile">
										电视剧
									</a>
								</div>
							</div>
			</div>
		    <div id="lists" class="mui-row">
		    </div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh : {
				    container:"#lists",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				    down : {
				      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				      height:'45px',//可选,默认50px.下拉刷新控件的高度,
				      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				      offset:'-15px', //可选 默认0px,下拉刷新控件的起始位置
				      auto: true,//可选,默认false.首次加载自动上拉刷新一次
				      callback :getList//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    }
				}
			})
			document.addEventListener('plusready', function(){
				var form  = document.getElementById("form1")
				var search_word = document.getElementById("search_word")
				var sliderSegmentedControl = document.getElementById("sliderSegmentedControl")
				var item = sliderSegmentedControl.getElementsByClassName("mui-control-item")
				for(var i=0;i<item.length;i++){
					item[i].addEventListener("tap",function(){
						getList(this.getAttribute("data-tid"))
					})
				}
				form.addEventListener("submit",function(){
					document.activeElement.blur(); 
					event.preventDefault();
					mui.openWindow({
							url: 'search.html', 
							id:"search",
							extras:{
								word:search_word.value
							}
					});
					search_word.value = ""
				})
				getList();
			}, false );
			function getList(tid){
				plus.nativeUI.showWaiting("加载中...")
				var xhr = new plus.net.XMLHttpRequest();
				xhr.onreadystatechange = function () {
				
					switch ( xhr.readyState ) {
						case 0:
							console.log( "xhr请求已初始化" );
						break;
						case 1:
							console.log( "xhr请求已打开" );
						break;
						case 2:
							console.log( "xhr请求已发送" );
						break;
						case 3:
							console.log( "xhr请求已响应");
							break;
						case 4:
							if ( xhr.status == 200 ) {
								var data = JSON.parse(xhr.responseText);
								var lists = document.getElementById("lists")
								var html = "";
				                for(var i=0;i<data.body.length;i++){
									html+='<div class="app-bg mui-col-sm-6 mui-col-xs-4" style="padding:5px;margin-bottom:10px">'
											+'<a class="tap-to-detail" data-vid="'+data.body[i].v_id+'">'
											+'<img  src="'+data.body[i].v_pic+'">'
											+'<div class="app-title">'+data.body[i].v_name+'</div>'
											+'</a>'
											+'</div>';
											
								}
								lists.innerHTML = html;
					
								var tap = document.getElementById("lists").getElementsByClassName('tap-to-detail');
								for(var i=0;i<tap.length;i++){
									tap[i].addEventListener('tap', function() {
										  mui.openWindow({
											url: 'detail.html', 
											id:"detail",
											extras:{
												vid:this.getAttribute("data-vid")
											}
										  });
									});
								}
								mui('#lists').pullRefresh().endPulldown()
								plus.nativeUI.closeWaiting()
							} else {
								console.log( "xhr请求失败："+xhr.readyState );
							}
							break;
						default :
							break;
					}
				}
				console.log(tid)
				if(tid!==undefined && tid!=="0"){
					xhr.open( "GET", "http://maplephoto.me/api/index.php?act=home&data_type=json&tid="+tid );
				}else{
					xhr.open( "GET", "http://maplephoto.me/api/index.php?act=home&data_type=json" );
				}
			
			
				xhr.send();
			}

			
		</script>
	</body>

</html>
